<!doctype html>
<html>
	<head>
		<meta charset="UTF-8"/>	<!--gbk gb2312-->
		<title>我是一个标题--792185203</title>
		<style type="text/css" id="cssRule">
			/*浏览器为我们每一个元素都提供默认边距*/
			*{padding:0px;margin:0px;}
			body{font-size: 14px;font:12px/1.5 "Microsoft Yahei","Helvetica Neue";margin:10px;}
			ul,li{list-style: none;}
			a{text-decoration:none;color:#999;}
			.userdialog{width:450px;height:210px;background:#191919;position: relative;box-shadow: 0 0 1em #999;border-radius: 2px;}
			.userdialog .cnt{height:140px;border-bottom: 1px solid #202020}
			.userdialog .cnt ul{padding:20px 0 20px 20px;}
			.userdialog .cnt li a{width:126px;height:98px;display: block;float:left;margin:0 10px 0 0;transition:all 0.3s ease;}
			.userdialog .cnt li a:hover{
				transform:scale(0.96);	transition:all 0.3s ease;
			}
			.userdialog .info{border-top: 1px solid #0c0c0c;padding: 16px 20px}
			.userdialog .info .w-img2{float:left;margin:2px 10px 0 0;}	
			.userdialog .info .bloginfo{width:210px;float:left;}
			.userdialog .info .bloginfo .name{width:210px;display: inline-block;line-height: 15px;color:#ccc;}
			.userdialog .info .bloginfo .subinfo{line-height: 15px;}
			.userdialog .followbtn{float: right;}
			.userdialog .followbtn span{  color: #888;line-height: 30px;font-size: 14px;}
			.userdialog .u-btn2 {
				  display: block;
				  width: 54px;
				  height: 30px;
				  margin: 2px 0 0;
				  padding: 0px  12px;
				  border-radius: 2px;
				  background-color: #333;
				  transition:all 0.3s ease;
			}
			.userdialog .u-btn2:hover{background:#444;transition:all 0.3s ease;}
			.userdialog .icon{position: absolute;bottom:-14px;left:82px;
				overflow: hidden;
				border-top: 8px solid #191919;
				border-right: 8px solid transparent;
				border-bottom: 8px solid transparent;
				border-left: 8px solid transparent;
			}
			
		</style>
	</head>
	<body>
		
		<div class="userdialog">
			<div class="cnt">
				<ul>
					<li><a href="javascript:void(0);"><img src="http://imglf1.nosdn.127.net/img/K2Qvd1hzT2VLOHA4d01OcVdnbi82ZE1OWGZmcEc0M1c.jpg" width="126" height="98"/></a>
					<a href="javascript:void(0);"><img src="http://imglf1.nosdn.127.net/img/K2Qvd1hzT2VLOHA4d01OcVdnbi82UjN0V1pJRk1LaWc.jpg" width="126" height="98"/></a>
					<a href="javascript:void(0);"><img src="http://imglf1.nosdn.127.net/img/K2Qvd1hzT2VLOHA4d01OcVdnbi82VWh4d2hXS0UxdGg.jpg" width="126" height="98"/></a></li>
				</ul>
			</div>	
			<div class="info">
				<div class="w-img2">
					<a onclick="#" target="_blank" href="javascript:void(0);">
						<img src="http://img.ph.126.net/S4PokzYebA6xzCNf125_JA==/2633479882121850220.jpg" width="30" height="30">
					</a>
				</div>
				<div class="bloginfo"> 
					<a onclick="#"  target="_blank" href="javascript:void(0);" class="name">LOFTER官方博客</a>                                
					<div class="subinfo">
						<a  href="http://i.lofter.com/" target="_blank">文章 524</a>
						<a  style="display:none" href="javascript:void(0);" target="_blank">喜欢 </a>
						<a  style="display:none" href="javascript:void(0);" target="_blank">关注 </a>
					</div>                            
				</div>
				<div>
				<div class="followbtn">                                    
					<a class="u-btn2 ftag" href="javascript:void(0);"><span>+已关注</span></a>
					<a class="u-btn u-btn-1 ftag" style="display:none;" href="javascript:void(0);"><b>+</b><span>关注</span></a>                               
					 
				</div>
			</div>
			<span class="icon"></span>
		</div>
	
	
	</body>
</html>